// var c = document.getElementById('canvas');
// var canvas = document.getElementById("myCanvas")

// class Circle {
//   constructor() {
//     this.radius = 100; // 圆环半径
//     this.lineWidth = 25; // 圆环边的宽度
//     this.strokeStyle = '#ccc'; //边的颜色
//     this.fillStyle = 'blue'; //填充色
//     this.lineCap = 'round';

//   }
//   draw(ctx) {
//     ctx.beginPath();
//     ctx.arc(250, 250, this.radius, 0, Math.PI * 2, true); // 坐标为250的圆，这里起始角度是0，结束角度是Math.PI*2
//     ctx.lineWidth = this.lineWidth;
//     ctx.strokeStyle = this.strokeStyle;
//     ctx.stroke(); // 这里用stroke画一个空心圆，想填充颜色的童鞋可以用fill方法
//   }
// }


// class Ring {
//   constructor(startAngle, percent) {
//     Circle.call(this);
//     this.startAngle = startAngle || 3 * Math.PI / 2; //弧起始角度
//     this.percent = percent; //弧占的比例
//   }
//   drawRing(ctx) {
//     this.draw(ctx); // 调用Circle的draw方法画圈圈
//     // angle
// ctx.beginPath();
// var anglePerSec = 2 * Math.PI / (100 / this.percent); // 蓝色的弧度
// ctx.arc(250, 250, this.radius, this.startAngle, this.startAngle +, false); //这里的圆心坐标要和cirle的保持一致
// ctx.strokeStyle = that.fillStyle;
// ctx.lineCap = that.lineCap;
// ctx.stroke();
// ctx.closePath();
//   }
// }

var currentPercent = 0;
var pper_interal;
var myPercentView;
var a;
var canvas;
var ctx;
function useProgress(type, oldPercent, newPercent) {
  myPercentView = document.getElementById("myPercent");
  canvas = document.getElementById("myCanvas");
  ctx = canvas.getContext('2d');

  a = setInterval(() => {
    clearInterval(a);
    if (type === 1) {
      currentPercent = oldPercent;
      pper_interal = setInterval(function () {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        if (currentPercent <= newPercent) {
          currentPercent = newPercent;
          clearTimeout(pper_interal);
        } else {
          currentPercent--;
        }
        drawArc(ctx, currentPercent);
      }, 10);

    } else if (type === 2) {
      currentPercent = oldPercent;
      pper_interal = setInterval(function () {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        if (currentPercent >= newPercent) {
          currentPercent = newPercent;
          clearTimeout(pper_interal);
        } else {
          currentPercent++;
        }
        drawArc(ctx, currentPercent);
      }, 10);
    }
  }, 1);
}

function drawArc(ctx, currentPercent) {
  console.log("drawArc(): currentPercent = " + currentPercent);
  //渐变颜色
  var gr = ctx.createLinearGradient(0, 0, 200, 200);
  gr.addColorStop(0, '#254FF7');
  gr.addColorStop(.2, '#254FF7');
  gr.addColorStop(1, '#86C1FF');
  //圆环参数
  var radius = 114; // 圆环半径
  var lineWidth = 24; // 圆环的环宽度
  var strokeStyle = 'rgba(0,0,0,0.03)'; //圆环的颜色
  var fillStyle = 'rgba(0,0,0,0.03)'; //圆环的填充色
  var lineCap = 'round';
  //角度计算
  var fromAngle = 5 * Math.PI / 6;//最小角度
  var toAngle = 2 * Math.PI + Math.PI / 6;//最大角度
  var deltaAngle = toAngle - fromAngle;//最大角度与最小角度之差
  var anglePerSec = ((100 - currentPercent) / 100.0) * deltaAngle; //产品消耗掉的比例(所占的角度值)
  myPercentView.innerHTML = "" + currentPercent;//显示剩余百分比
  //绘制背景圆环
  ctx.beginPath();
  ctx.arc(126, 126, radius, fromAngle, toAngle, false); // 坐标为250的圆，这里起始角度是0，结束角度是Math.PI*2
  ctx.lineWidth = lineWidth;
  ctx.strokeStyle = strokeStyle;
  ctx.fillStyle = fillStyle;
  ctx.lineCap = lineCap;
  ctx.stroke(); // 这里用stroke画一个空心圆，想填充颜色的童鞋可以用fill方法

  //绘制进度圆环
  ctx.beginPath();
  ctx.lineWidth = lineWidth;
  ctx.strokeStyle = gr;
  ctx.fillStyle = gr;
  ctx.lineCap = lineCap;
  ctx.arc(126, 126, radius, fromAngle + anglePerSec, toAngle, false); //这里的圆心坐标要和cirle的保持一致

  //绘制圆环阴影效果
  // // ctx.globalCompositeOperation = "xor"; //组合
  // ctx.beginPath();
  // ctx.lineWidth = lineWidth;
  // ctx.shadowColor = "rgba(0,0,255,0.75)";
  // // ctx.shadowOffsetX = 5;
  // // ctx.shadowOffsetY = 5;
  // ctx.shadowBlur = 5
  // // ctx.strokeStyle = gr;
  // // ctx.fillStyle = gr;
  // ctx.lineCap = lineCap;
  // ctx.arc(126, 126, radius, fromAngle + anglePerSec, toAngle, false); //这里的圆心坐标要和cirle的保持一致

  ctx.stroke();
}

export {
  useProgress,
}


